import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Center, Skeleton, VStack } from 'native-base';

interface SkeletonLoadingProps {
  rows: number; // 骨架屏行数
}

const SkeletonLoading: React.FC<SkeletonLoadingProps> = ({ rows }) => {
  return (
    <Center w="100%">
      <VStack w="95%" h="95%" maxW="400" space={8} overflow="hidden" rounded="md">
        {[...Array(rows).keys()].map((index) => {
          return <Skeleton.Text px="4" key={index} />;
        })}
      </VStack>
    </Center>
  );
};

const styles = StyleSheet.create({
  root: {
    flex: 1,
    paddingVertical: 20,
    paddingHorizontal: 20,
  },
});

export default SkeletonLoading;
